<template>
  <a-tree-select
    v-model:value="val"
    :getPopupContainer="GetPopupContainer"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="treeData"
    :load-data="onLoadData"
    placeholder="请选择"
  />
</template>

<script lang="ts">
import { computed, defineComponent, ref, onBeforeMount } from 'vue';
import { ResponseHandle, GetPopupContainer } from '@/global/util/preUtils';
import ajax from '@/core/ajax';

export default defineComponent({
  name: 'DeptTreeSelect',
  props: {
    selectValue: {
      type: String,
      default: undefined,
    },
  },
  setup(prop, context) {
    const val = computed({
      get: () => prop.selectValue,
      set: (value) => context.emit('update:selectValue', value),
    });
    const treeData = ref<any>([]);
    const onLoadData = async (treeNode: any) => {
      const res = await ajax.get('/org/list', {
        params: {
          parentId: treeNode.key,
        },
      });
      ResponseHandle(res, () => {
        treeNode.dataRef.children = res.data.map((it: any) => {
          return {
            title: it.orgName,
            value: it.orgId,
          };
        });
        treeData.value = [...treeData.value];
      });
    };
    onBeforeMount(async () => {
      const res = await ajax.get('/org/list', {
        params: {
          parentId: 'root',
        },
      });
      ResponseHandle(res, () => {
        treeData.value = res.data.map((it: any) => {
          return {
            title: it.orgName,
            value: it.orgId,
          };
        });
      });
    });

    return {
      GetPopupContainer,
      val,
      treeData,
      onLoadData,
    };
  },
});
</script>

<style lang="less" scoped>
:deep .ant-select-selector {
  border-radius: 4px;
}
</style>
